﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>同党</title>
<link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
<script src="/js/jquery/jquery.min.js"></script>
<script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/css/reset.css"/>
<link rel="stylesheet" href="/css/message.css" />
<script src="/js/plugins/jrender/jrender.min.js"></script>
<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
<script src="/js/plugins/dialog2/dialog.min.js"></script>
<link rel="stylesheet" type="text/css" href="../js/chat/font_Icon/iconfont.css">
<link rel="stylesheet" type="text/css" href="../js/chat/css/chat.css">
<script src="/js/checkLogin.js"></script>
<script src="/js/common.js"></script>

</head>

<div class="chatContainer">
    <div class="chatBtn">
        <i class="iconfont icon-xiaoxi1"></i>
    </div>
    <!--消息内容-->
    <div class="chat-message-num"></div>
    <div class="chatBox" ref="chatBox">




        <!--上方头部-->
        <div class="chatBox-head">
            <!--消息列表的头-->
            <div class="chatBox-head-one">
                <div class="search-head">
                    <div class="row nav-search">
                        <div class="col">
                            <a href="javascript:window.history.go(-1);">
                                <span><i class="fa fa-chevron-left" ></i></span>
                            </a>
                        </div>
                        <div class="col">
                            消息列表
                        </div>
                        <div class="col"></div>
                    </div>
                </div>
                <!--<div class="chat-close" style="margin: 10px 10px 0 0;font-size: 14px">关闭</div>-->
            </div>

            <!--聊天框的头-->
            <div class="chatBox-head-two">
                <div class="chat-return">返回</div>
                <div class="chat-people">
                    <div class="ChatInfoHead">
                        <img src="" alt="头像">
                    </div>
                    <!--用户昵称-->
                    <div class="ChatInfoName"></div>
                </div>
                <!--<div class="chat-close">关闭</div>-->
            </div>
        </div>


        <div class="chatBox-info">

            <!--消息列表-->
            <div class="chatBox-list" ref="chatBoxlist">
                <!--<div class="chat-list-people" data-id="2">
                    <div><img src="../js/chat/img/icon02.png" alt="头像"></div>
                    <div class="chat-name">
                        <p>白兰地</p>
                    </div>
                    <div class="message-num">8</div>
                </div>
                <div class="chat-list-people" data-id="2">
                    <div><img src="../js/chat/img/icon02.png" alt="头像"></div>
                    <div class="chat-name">
                        <p>白兰地</p>
                    </div>
                    <div class="message-num">8</div>
                </div>-->
            </div>



            <!--聊天框-->
            <div class="chatBox-kuang" ref="chatBoxkuang">
                <div class="chatBox-content">
                    <div class="chatBox-content-demo" id="chatBox-content-demo">

                        <!--<div class="clearfloat">
                            <div class="author-name">
                                <small class="chat-date">2017-12-02 14:26:58</small>
                            </div>
                            <div class="left">
                                <div class="chat-avatars"><img src="../js/chat/img/icon01.png" alt="头像"></div>
                                <div class="chat-message">
                                    给你看张图
                                </div>
                            </div>
                        </div>

                        <div class="clearfloat">
                            <div class="author-name">
                                <small class="chat-date">2017-12-02 14:26:58</small>
                            </div>
                            <div class="left">
                                <div class="chat-avatars"><img src="../js/chat/img/icon01.png" alt="头像"></div>
                                <div class="chat-message">
                                    <img src="../js/chat/img/1.png" alt="">
                                </div>
                            </div>
                        </div>

                        <div class="clearfloat">
                            <div class="author-name">
                                <small class="chat-date">2017-12-02 14:26:58</small>
                            </div>
                            <div class="right">
                                <div class="chat-message">嗯，适合做壁纸</div>
                                <div class="chat-avatars"><img src="../js/chat/img/icon02.png" alt="头像"></div>
                            </div>
                        </div>-->

                    </div>
                </div>


                <div class="chatBox-send">
                    <div class="div-textarea" contenteditable="true"></div>
                    <div>
                        <button id="chat-biaoqing" class="btn-default-styles">
                            <i class="iconfont icon-biaoqing"></i>
                        </button>
                        <label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles">
                            <input type="file" onchange="selectImg(this)" accept="image/jpg,image/jpeg,image/png"
                                   name="file" id="inputImage" class="hidden">
                            <i class="iconfont icon-tuxiang"></i>
                        </label>
                        <button id="chat-fasong" class="btn-default-styles"><i class="iconfont icon-fasong"></i>
                        </button>
                    </div>
                    <div class="biaoqing-photo">
                        <ul>
                            <li><span class="emoji-picker-image" style="background-position: -9px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -18px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -9px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -52px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -9px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -86px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -9px -120px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -120px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -120px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -120px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -120px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -120px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -9px -154px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -40px -154px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -71px -154px;"></span></li>
                            <li><span class="emoji-picker-image" style="background-position: -102px -154px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -133px -154px;"></span>
                            </li>
                            <li><span class="emoji-picker-image" style="background-position: -164px -154px;"></span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    screenFuc();
    function screenFuc() {
        var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度
        //屏幕小于768px时候,布局change
        var winWidth = $(window).innerWidth();
        if (winWidth <= 768) {
            var totalHeight = $(window).height(); //页面整体高度
            $(".chatBox-info").css("height", totalHeight - topHeight);
            var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度
            //中间内容高度
            $(".chatBox-content").css("height", infoHeight - 46);
            $(".chatBox-content-demo").css("height", infoHeight - 46);

            $(".chatBox-list").css("height", totalHeight - topHeight);
            $(".chatBox-kuang").css("height", totalHeight - topHeight);
            $(".div-textarea").css("width", winWidth - 106);
        } else {
            $(".chatBox-info").css("height", 495);
            $(".chatBox-content").css("height", 448);
            $(".chatBox-content-demo").css("height", 448);
            $(".chatBox-list").css("height", 495);
            $(".chatBox-kuang").css("height", 495);
            $(".div-textarea").css("width", 260);
        }
    }
    (window.onresize = function () {
        screenFuc();
    })();


    //未读信息数量为空时
    var totalNum = $(".chat-message-num").html();
    if (totalNum == "") {
        $(".chat-message-num").css("padding", 0);
    }
    $(".message-num").each(function () {
        var wdNum = $(this).html();
        if (wdNum == "") {
            $(this).css("padding", 0);
        }
    });


    //打开/关闭聊天框
    $(".chatBtn").click(function () {
        $(".chatBox").toggle(10);
    })
    $(".chat-close").click(function () {
        $(".chatBox").toggle(10);
    })


    var tag = false;//定义一个标记  如果为false则在列表页面, 如果为true则在消息页面
    var otherId;


    //返回列表
    $(".chat-return").click(function () {
        $(".chatBox-head-one").toggle(1);
        $(".chatBox-head-two").toggle(1);
        $(".chatBox-list").fadeToggle(1);
        $(".chatBox-kuang").fadeToggle(1);
        tag = false;//标记为列表页面

        window.location.reload();
    });

    //websocket事件
    var ws;
    $(function () {
        console.log("发送人id: "+user.id);
        ws = new WebSocket("ws://localhost:8888/myHandler?id=" + user.id);
        ws.onopen = function () {
            console.log("已经建立连接....");
        }

        //接收消息
        ws.onmessage = function (evt) {
            var msgStr = evt.data;
            var msg = JSON.parse(msgStr);
            var ids = [];//所有消息列表中绑定的发送人id
            $(".chat-list-people").each(function (index, ele) {
                ids[index] = $(ele).data("id");
            })

            var hasSendUser = false;//消息列表是否有发送人
            for(var i=0; i<ids.length; i++){
                //如果消息列表有发送人
                if(ids[i] == msg.sendUser.id){
                    hasSendUser = true;
                    var people = $(".chat-list-people[data-id='"+ids[i]+"']");
                    var numDiv = $(people).find("div[class='message-num']");
                    var msgSpan= $(people).find("span[class='message-msg']");
                    //如果当前用户在列表页面 或者 不在发送人的聊天页面  -->拼接消息
                    if(tag == false || (tag==true && otherId != msg.sendUser.id)){
                        //1.如果之前样式为message-num那么 那么未读数+1
                        if(numDiv.length){
                            console.log(parseInt($(numDiv).html()));
                            numDiv.html(parseInt(numDiv.html())+1);

                        //2.如果之前样式为message-msg, 那么变为message-num,并且未读数为1
                        }else if(msgSpan.length){
                            msgSpan.remove();
                            $(people).append('<div class="message-num">1</div>');
                        }
                    //否则当前用户在和发送人的聊天页面  --> 拼接消息
                    }else if(tag == true && otherId ==msg.sendUser.id){
                        //改收的消息为已读
                        $.ajax({
                            url: baseUrl +　"/chats/updateState",
                            data: {
                                id: msg.id,
                                state: 1
                            },
                            method: 'put'
                        });
                    }
                    $(people).detach();
                    $(".chatBox-list").prepend(people);

                    //--->拼接消息
                    var chatDiv = '<div class="clearfloat">\n' +
                        '                            <div class="author-name">\n' +
                        '                                <small class="chat-date">'+msg.sendTimeName+'</small>\n' +
                        '                            </div>\n' +
                        '                            <div class="left">\n' +
                        '                                <div class="chat-avatars"><img src="'+msg.sendUser.headImgUrl+'" alt="头像"></div>\n' +
                        '                                <div class="chat-message">\n' +
                        '                                    '+msg.content+'\n' +
                        '                                </div>\n' +
                        '                            </div>\n' +
                        '                        </div>';
                    $("#chatBox-content-demo").append(chatDiv);
                    //默认在最底部
                    $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                    break;
                }
            }
            //如果消息列表没有发送人
            if(hasSendUser == false){
                var div = '<div class="chat-list-people" data-id="'+msg.sendUser.id+'">\n' +
                    '                    <div><img src="'+msg.sendUser.headImgUrl+'" alt="头像"></div>\n' +
                    '                    <div class="chat-name">\n' +
                    '                        <p>'+msg.sendUser.nickName+'</p>\n' +
                    '                    </div>\n' +
                    '                    <div class="message-num">1</div>\n' +
                    '                </div>';

                $(".chatBox-list").prepend(div);
            }
        }
        ws.onclose = function () {
            console.log("连接已关闭")
        }
    })

    //发送信息
    $("#chat-fasong").click(function () {
        var content = $(".div-textarea").html().replace(/[\n\r]/g, '<br>')
        if (content != "") {
            console.log("接收人id: "+otherId);
            sendAll(user.id, otherId, content);

            //发送后清空输入框
            $(".div-textarea").html("");
            //聊天框默认最底部
            $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
        }
    });

    //发送到后台, 并在前台显示
    var sendAll = function (sendUserId, receiveUserId, content) {
        var vo = {
            sendUser: {
                id: sendUserId
            },
            receiveUser: {
                id: receiveUserId
            },
            content: content
        };
        var voStr = JSON.stringify(vo);
        //发送到服务器
        ws.send(voStr);

        //前台显示
        $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
            "<div class=\"author-name\"><small class=\"chat-date\">"+new Date().format("yyyy-MM-dd HH:mm:ss")+"</small> </div> " +
            "<div class=\"right\"> <div class=\"chat-message\"> " + content + " </div> " +
            "<div class=\"chat-avatars\"><img src=\""+user.headImgUrl+"\" alt=\"头像\" /></div> </div> </div>");
    }



    //查询聊天记录 正序   并修改状态为已读
    var queryChatHistory = function (sendUserId, receiveUserId) {
        $.get(baseUrl + "/chats/chatHistory", {sendUserId: sendUserId, receiveUserId: receiveUserId}, function (data) {
            var chatDiv;
            $(data).each(function (index, ele) {
                if(ele.mine){
                    chatDiv = '<div class="clearfloat">\n' +
                        '                            <div class="author-name">\n' +
                        '                                <small class="chat-date">'+ele.sendTime+'</small>\n' +
                        '                            </div>\n' +
                        '                            <div class="right">\n' +
                        '                                <div class="chat-message">'+ele.content+'</div>\n' +
                        '                                <div class="chat-avatars"><img src="'+ele.sendUser.headImgUrl+'" alt="头像"></div>\n' +
                        '                            </div>\n' +
                        '                        </div>';
                }else {
                    chatDiv = '<div class="clearfloat">\n' +
                        '                            <div class="author-name">\n' +
                        '                                <small class="chat-date">'+ele.sendTime+'</small>\n' +
                        '                            </div>\n' +
                        '                            <div class="left">\n' +
                        '                                <div class="chat-avatars"><img src="'+ele.sendUser.headImgUrl+'" alt="头像"></div>\n' +
                        '                                <div class="chat-message">\n' +
                        '                                    '+ele.content+'\n' +
                        '                                </div>\n' +
                        '                            </div>\n' +
                        '                        </div>';
                }
                $("#chatBox-content-demo").append(chatDiv);
            })
            //默认在最底部
            $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
        })
    }

    //消息列表页面
    $(function () {
        $.get(baseUrl + "/chats", {currentPage: 1, receiveUserId: user.id}, function (data) {
            $(data.list).each(function (index, ele) {
                var unreadDiv = '<span class="message-msg">' + ele.timeMsg + '</span>\n';
                if(ele.unread){
                    unreadDiv = '<div class="message-num">' + ele.unread + '</div>\n'
                }
                var div = '<div class="chat-list-people" data-id="'+ele.sendUserId+'">\n' +
                    '                    <div><img src="'+ele.headImgUrl+'" alt="头像"></div>\n' +
                    '                    <div class="chat-name">\n' +
                    '                        <p>'+ele.nickName+'</p>\n' +
                    '                    </div>\n' +
                    unreadDiv +
                    '                </div>';
                $(".chatBox-list").append(div);
            })


            console.log(data);
            $(".chat-list-people").each(function () {
                //点击  进聊天页面
                $(this).click(function () {
                    $("#chatBox-content-demo").html("");
                    //1.修改 当前聊天对象的提示时间信息
                    var tipDiv = $(this).find("div[class='message-num']");
                    if(tipDiv.length == 1){
                        $(tipDiv).removeClass('message-num').addClass('message-msg');
                    }else{
                        tipDiv = $(this).find("div[class='message-msg']");
                    }
                    var thisId = $(this).data("id");
                    var timeMsg;
                    $(data.list).each(function (index, ele) {
                        if(ele.sendUserId == thisId){
                            timeMsg = ele.timeMsg;
                        }
                    })
                    $(tipDiv).html(timeMsg);


                    otherId = $(this).data("id");
                    console.log("对方id: " + otherId);
                    console.log("自己id: " + user.id);
                    //查询聊天记录 正序   并修改状态为已读
                    queryChatHistory(otherId, user.id);

                    var n = $(this).index();
                    $(".chatBox-head-one").toggle();
                    $(".chatBox-head-two").toggle();
                    $(".chatBox-list").fadeToggle();
                    $(".chatBox-kuang").fadeToggle();
                    //传名字
                    $(".ChatInfoName").text($(this).children(".chat-name").children("p").eq(0).html());
                    //传头像
                    $(".ChatInfoHead>img").attr("src", $(this).children().eq(0).children("img").attr("src"));
                    //聊天框默认最底部
                    $(document).ready(function () {
                        $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
                    });

                    tag = true;//标记为聊天页面
                })
            });
        })
    })

    //发送表情
    $("#chat-biaoqing").click(function () {
        $(".biaoqing-photo").toggle();
    });
    $(document).click(function () {
        $(".biaoqing-photo").css("display", "none");
    });
    $("#chat-biaoqing").click(function (event) {
        event.stopPropagation();//阻止事件
    });
    $(".emoji-picker-image").each(function () {
        $(this).click(function () {
            var bq = $(this).parent().html();
            console.log(bq)

            sendAll(user.id, otherId, bq);

            //发送后关闭表情框
            $(".biaoqing-photo").toggle();
            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
        })
    });

    //发送图片
    function selectImg(pic) {
        if (!pic.files || !pic.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var images = evt.target.result;
            $(".chatBox-content-demo").append("<div class=\"clearfloat\">" +
                "<div class=\"author-name\"><small class=\"chat-date\">2017-12-02 14:26:58</small> </div> " +
                "<div class=\"right\"> <div class=\"chat-message\"><img src=" + images + "></div> " +
                "<div class=\"chat-avatars\"><img src=\"../js/chat/img/icon01.png\" alt=\"头像\" /></div> </div> </div>");
            //聊天框默认最底部
            $(document).ready(function () {
                $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
            });
        };
        reader.readAsDataURL(pic.files[0]);
    }

    //日期格式化
    Date.prototype.format = function(fmt) {
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "H+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
</script>

</body>
</html>

